<!--填空题界面-->
<template>
<div>
  <el-menu class="el-menu-demo" background-color="#d9ecff">
    <el-menu-item style="float: left;font-size: 20px;margin-left: 10px">
      <img src="../assets/heima.png" alt="">
      <a style="margin-left: 10px">课程学习与认证管理系统</a>
    </el-menu-item>
    <el-menu-item style="float: right">
      <el-button type="primary" @click="returnLogin">退出登录</el-button>
    </el-menu-item>
  </el-menu>
  <el-row>
    <el-col :span="(!isCollapse)? 4:1" style=";margin-top: 10px">
      <el-menu default-active="2-2-3" :collapse="isCollapse" :collapse-transition="false" >
        <div class="toggle-button" @click="toggleCollage">|||</div>
        <el-menu-item index="1">
          <i class="el-icon-menu"></i>
          <span slot="title" @click="toCourseManagement">课程管理</span>
        </el-menu-item>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span slot="title" >单元信息</span>
          </template>
          <el-menu-item index="2-1" @click="toVideo">单元视频</el-menu-item>
          <el-submenu index="2-2">
            <span slot="title">单元测试</span>
            <el-menu-item index="2-2-1" @click="toChoiceQuestion">选择题</el-menu-item>
            <el-menu-item index="2-2-2" @click="toTrueOrFalseQuestion">判断题</el-menu-item>
            <el-menu-item index="2-2-3">填空题</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-document"></i>
            <span slot="title">课程证书</span>
          </template>
          <el-menu-item index="3-1">暂未开发</el-menu-item>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span slot="title">系统管理</span>
          </template>
          <el-menu-item index="4-1">暂未开发</el-menu-item>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span slot="title">管理员管理</span>
          </template>
          <el-menu-item index="5-1">暂未开发</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-col>
    <el-col :span="(!isCollapse)? 19:22" style="margin-top: 10px;" :offset="1">
      <el-row>
        <el-col :span="22" style="margin-top: 20px;margin-left: 5px">
          <el-breadcrumb separator-class="el-icon-arrow-right" >
            <el-breadcrumb-item style="font-size: x-large;font-weight: bolder" @click.native="returnUnitInformation">单元信息</el-breadcrumb-item>
            <el-breadcrumb-item style="font-size: x-large;" >单元测试</el-breadcrumb-item>
            <el-breadcrumb-item style="font-size: x-large" >填空题</el-breadcrumb-item>
          </el-breadcrumb>
        </el-col>
        <el-col v-for="(item,index) in blankQuestionList" :key="index" :span="10" :offset="1" style="background-color: aliceblue;margin: 30px"  >
          <div>
            <el-card shadow="always" id="item.id">
              <div slot="header" >
                <span>{{ "题目：" + (item.subject).replace(/[:question]/g," ") }}</span>
              </div>
              <div>
                <span v-for="(item1,index1) in item.blankQuestionItems"
                      :key="index1">{{"答案" + (index1+1) + ":" + item1.content + " "}}</span>
              </div>
              <el-divider class="el-divider-ff"></el-divider>
              <div style="float: right;margin-bottom: 14px">
                <span>{{ '创建时间：' + item.createTime[0] +"/" + item.createTime[1] + "/" + item.createTime[2] }}</span>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
  <div style="position: fixed;right: 120px; bottom: 110px">
    <el-button class="circle_button" type="primary" @click="dialogFormVisible = true">+</el-button>
  </div>
  <el-dialog title="添加填空题" :visible.sync="dialogFormVisible" >
    <el-form :model='addBlankQuestion'>
      <el-form-item label="填空题题目" :label-width="formLabelWidth">
        <el-input  autocomplete="off" v-model="addBlankQuestion.subject"></el-input>
      </el-form-item>
      <el-form-item label="答案"
                    :label-width="formLabelWidth"
                    :key="index" v-for="(index) in answerNumber" >
        <el-input  autocomplete="off"
                   v-model="addBlankQuestion.blankQuestionItemList[index-1].content"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="addAnswer">添加答案</el-button>
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="addQuestion">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
import { post } from '@/common/serviceUtil'
import axios from 'axios'

export default {
  name: 'BlankQuestion',
  data () {
    return {
      courseId: '',
      isCollapse: false,
      formLabelWidth: '120px',
      dialogTableVisible: false,
      dialogFormVisible: false,
      answerNumber: 1,
      unit: {
        courseUnitId: ''
      },
      blankQuestionList: [], // 存入后端返回回来数组
      addBlankQuestion: {
        courseUnitId: '',
        subject: '',
        blankQuestionItemList: [
          {
            content: ''
          }
        ]
      }
    }
  },
  methods: {
    returnLogin () {
      post('//localhost:8088/admin/logout').then((response) => {
        console.log(response)
        if (response.data.isSuccess) {
          this.$router.push('/Login')
        } else {
          alert('呀！退出失败，请稍后再试！')
        }
      })
    }, // 退出登录按钮
    toggleCollage () {
      this.isCollapse = !this.isCollapse
    }, // 导航栏开关
    returnUnitInformation () {
      this.$router.push({
        name: 'UnitInformation',
        path: '/UnitInformation',
        params: { UnitId: this.unit.courseUnitId, courseID: this.courseId }
      })
    }, // 返回该单元信息界面
    getAllBlankQuestion () {
      post('//localhost:8088/blankQuestion/getList', this.unit).then((response) => {
        console.log(response)
        this.blankQuestionList = response.data.data
      })
    },
    addQuestion () {
      this.dialogFormVisible = false
      console.log(this.addBlankQuestion)
      axios({
        method: 'post',
        url: 'http://localhost:8088/blankQuestion/add',
        headers: {
          'Content-Type': 'application/json',
          'X-Requested-With': 'xmlhttprequest'
        },
        data: JSON.stringify(this.addBlankQuestion)
      }).then((response) => {
        console.log(JSON.stringify(response.data))
        this.getAllBlankQuestion()
      })
    },
    addAnswer () {
      if (this.answerNumber === 0) {
        this.addBlankQuestion.blankQuestionItemList.shift()
      }
      const item = {
        content: ''
      }
      this.addBlankQuestion.blankQuestionItemList.push(item)
      this.answerNumber++
    },
    toCourseManagement () {
      this.$router.push('/CourseManagement')
    },
    toVideo () {
      this.$router.push({
        name: 'Video',
        path: '/Video',
        params: { courseUnitId: this.unit.courseUnitId, courseId: this.courseId }
      })
    },
    toTrueOrFalseQuestion () {
      this.$router.push({
        name: 'TrueOrFalseQuestions',
        path: '/TrueOrFalseQuestions',
        params: { UnitId: this.unit.courseUnitId, courseId: this.courseId }
      })
    },
    toChoiceQuestion () {
      this.$router.push({
        name: 'ChoiceQuestion',
        path: '/ChoiceQuestion',
        params: {
          UnitId: this.unit.courseUnitId,
          CourseId: this.courseId
        }
      })
    }
  },
  mounted () {
    this.unit.courseUnitId = this.$route.params.UnitId
    this.addBlankQuestion.courseUnitId = this.$route.params.UnitId
    this.courseId = this.$route.params.courseId
    this.getAllBlankQuestion()
  }
}
</script>

<style lang="less" scoped>
.toggle-button{
  // 添加背景颜色
  background-color: #4A5064;
  // 设置文本大小
  font-size:10px;
  // 设置文本行高
  line-height:24px;
  // 设置文本颜色
  color:#fff;
  // 设置文本居中
  text-align: center;
  // 设置文本间距
  letter-spacing: 0.2em;
  // 设置鼠标悬浮变小手效果
  cursor:pointer;
}
img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #d9ecff;
}
.circle_button{
  border-radius: 70%;
  font-size: 40px;
  border-color: #3a8ee6;
  background-color: #3a8ee6;
  z-index: 99999;
}
</style>
